<style>
  .right-item .module-title{
    background: url("../../static/image/k_29.png") center center no-repeat;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
  }
  .right-item .module-content{
    padding:10px 0;
  }
  .right-item .history .year{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 15px;
  }
  .module-content li{
    cursor: pointer;
  }
  .right-item .history li{
    line-height: 40px;
    padding-left:20px;
    position: relative;
    font-size: 14px;
    color:#888;
  }
  .right-item .history li .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background: #3D6AE6;
    position: absolute;
    left: 0;
    top: 17px;
  }
  .right-item .look-all{
    color: #000;
    font-size: 14px;
    text-align: right;
    padding-top: 10px;
    cursor: pointer;
  }
  .car-cover{
    position: absolute;
    bottom:5px;
    left:0;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    letter-spacing: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car>img{
    width:290px;
    height:175px;
  }
  .artice>ul>li>div>h3,.alike>ul>li>div>h3{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .advantage{
    letter-spacing: 2px;
    line-height: 24px;
    padding: 15px 0px;
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .review .car-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .review .review-content{
    padding:10px 0;
    color: #666;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: 2px;
    font-family: '微软雅黑';
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .artice>ul>li>div>p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .review h4{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 100;
  }
  .review a{
    display: block;
  }
  .artice>ul>li{
    margin-top: 15px;
  }
  .artice>ul,.artice>ul>li{
    overflow: hidden;
  }
  .artice>ul>li>img{
    width:120px;
    height:120px;
    float: left;
  }
  .artice>ul>li>div{
    margin-left:130px;

  }
  .artice>ul>li>div>h3{
    font-size: 18px;
    margin:12px 0px;
    font-weight: 600;
  }
  .artice>ul>li>div>p{
    font-size: 14px;
    line-height: 26px;
  }
  .artice>ul>li>div>p>span{
    color: #fe0201;
  }
  .alike>ul>li>div>h3{
    margin:4px 0!important;
  }
  .pho>img{
    width:40px;
    height:40px;
    border-radius: 50%;
  }
  .pho>span{
    font-size: 15px;
    vertical-align: 15px;
    margin-left: 10px;
  }
</style>
<template>
  <div class="">
    <div class="right-item"  v-if="mo_id != ''">
      <div class="module-title">
        成交历史
      </div>
      <div class="module-content history">
        <div class="year">
          {{historyyear}}年
        </div>
        <div>
          <ul>
            <li v-for="(item,index) in historylist" @click="lookAll">
              <div class="dot"></div>
              <div class="left">
                {{item.h_month}}成交平均价格
              </div>
              <div class="right">
                {{item.h_price}}万
              </div>
              <div class="clear"></div>
            </li>
          </ul>
        </div>
        <div class="look-all" @click="lookAll" v-if="historylist.length>0">
          <span>
              查看全部
          </span>
          <i class="enter-arrow-icon"></i>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="module-title">
        推荐车型
      </div>
      <div class="module-content recommend">
        <div>
          <ul>
            <li v-for="(item,index) in commendCarlist" @click="commend(item.mo_id)">
              <div class="right-module-car">
                <img :src="item.mo_image">
                <div class="car-cover">
                  {{item.ca_name}}
                </div>
              </div>
              <div class="advantage">
                {{item.mo_name}}
              </div>
            </li>
          </ul>
        </div>
        <div class="look-all"  v-if="commendCarlist.length>0">
            <span>
              查看全部
            </span>
            <i class="enter-arrow-icon"></i>
        </div>
      </div>
    </div>
    <div class="right-item" v-if="mo_name != ''">
      <div class="module-title">
        车评内容
      </div>
      <div class="module-content review">
        <div  v-for="(item,index) in EvaluationList">
          <h4 v-if="item.ev_role == '官方'">
            官网评测:
          </h4>
          <h4 v-if="item.ev_role == '用户'">
            用户测评:
          </h4>
          <div class="pho" v-if="item.ev_role == '用户'">
            <img :src="item.us_headimg" alt="">
            <span>{{item.us_nickname}}</span>
          </div>
          <p class="review-content" v-html="item.introduction">
            奥迪新款Q3轻快平稳的体验！打在最新款LED流水灯设计。
          </p>
          <div>
            <div class="right-module-car">
              <img :src="item.ev_image">
              <!--<div class="car-play">-->
                <!--<img src="../../static/image/k_1.png">-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-item" v-else>
      <div class="module-title">
        车型测评
      </div>
      <div class="artice module-content">
        <ul>
          <li v-for="(item,index) in EvaluationList" @click="evadetail(item.ev_id,item.ev_type)">
            <img :src="item.ev_image" alt="">
            <div>
              <h3>{{item.ev_title}}</h3>
              <p v-html="item.introduction"></p>
            </div>
          </li>
        </ul>
        <div class="look-all" v-if="EvaluationList.length > 0" @click="eva">
          <span>
           查看全部
         </span>
          <i class="enter-arrow-icon"></i>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="module-title">
        相关政策
      </div>
      <div class="module-content recommend">
        <div>
          <ul>
            <li v-for="(item,index) in ArticleRecommendList">
              <div class="right-module-car">
                <img :src="item.ar_image">
                <div class="car-cover">
                  {{item.ar_title}}
                </div>
              </div>
              <div class="advantage" v-html="item.ar_introduce">
              </div>
            </li>
          </ul>
        </div>
        <div class="look-all">
          <a href="">
            <span>
              查看全部
            </span>
            <i class="enter-arrow-icon"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="right-item">
      <div class="module-title">
        品牌文章
      </div>
      <div class="artice module-content">
        <ul>
          <li v-for="(item,index) in Article">
            <img :src="item.ar_image" alt="">
            <div>
              <h3>{{item.ar_title}}</h3>
              <p v-html="item.ar_introduce"></p>
            </div>
          </li>
        </ul>
        <div class="look-all">
          <span>
           查看全部
         </span>
         <i class="enter-arrow-icon"></i>
        </div>
      </div>
    </div>
    <div class="right-item" v-if="mo_id != ''">
      <div class="module-title">
        周边车型
      </div>
      <div class="artice alike module-content">
        <ul>
          <li v-for="(item,index) in RimCar">
            <img :src="item.mo_image" alt="">
            <div>
              <h3>{{item.ca_name}}</h3>
              <p>排量：{{item.mo_car_displacement}}T</p>
              <p>销量：{{item.mo_sales}}辆</p>
              <p>价格：<span>{{item.mo_guide_price}}</span></p>
            </div>
          </li>
        </ul>
        <div class="look-all">
          <span>
           查看全部
          </span>
          <i class="enter-arrow-icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'vehicleright',
    data () {
      return {
        historylist: [],
        historyyear: '',
        limit: 3,
        commendCarlist: [],
        EvaluationList: [],
        limita: 2,
        ArticleRecommendList: [],
        Article: [],
        RimCar: []
      }
    },
    props: {
      mo_id: {
        defult: ''
      },
      ca_id: {
        defult: ''
      },
      cate: {
        defult: ''
      },
      mo_name: {
        defult: ''
      },
      sKey: {
        defult: ''
      }
    },
    methods: {
      evadetail: function (id, name) {
        if (this.$route.path === '/Revehicle/AssessmentDetail') {
          this.$emit('getevId', id, name)
        } else {
          let routeUrl = this.$router.resolve({
            path: '/Revehicle/AssessmentDetail',
            query: {
              cate: name + '测评',
              ev_id: id
            }
          })
          window.open(routeUrl.href, '_self')
        }
      },
      eva: function () {
        let routeUrl = this.$router.resolve({
          path: '/VehicleCenter',
          query: {
            cate: '爱车测评'
          }
        })
        window.open(routeUrl.href, '_self')
      },
      commend: function (id) {
        console.log(this.$route.path)
        let thisObj = this
        if (this.$route.path === '/ProduceDetail') {
          thisObj.$emit('getmoId', id)
        } else {
          let routeUrl = this.$router.resolve({
            path: '/ProduceDetail',
            query: {
              cate: thisObj.cate,
              mo_id: id
            }
          })
          window.open(routeUrl.href, '_self')
        }
      },
      lookAll: function () {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/TransactionHistory',
          query: {
            cate: thisObj.cate,
            mo_id: this.mo_id,
            mo_name: this.mo_name,
            skey: this.sKey
          }
        })
        window.open(routeUrl.href, '_self')
      },
      getcaIdlist: function () {
        this.getRecommendCar()
        this.getEvaluationList()
        this.historyAjax()
        this.getArticleRecommendList()
        this.getArticle()
      },
      getRecommendCar: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            mo_id: thisObj.mo_id,
            limit: thisObj.limit,
            ca_id: thisObj.ca_id
          },
          slient: true,
          userinfo: false,
          url: 'Car/getRecommendCar',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.commendCarlist = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getEvaluationList: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            skey: thisObj.mo_name,
            limit: thisObj.limit,
            ca_id: thisObj.ca_id
          },
          slient: true,
          userinfo: false,
          url: 'Evaluation/getEvaluationRecommendList',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.EvaluationList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      historyAjax: function () {
        let thisObj = this
        if (thisObj.mo_id === '') {
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            mo_id: thisObj.mo_id,
            ca_id: thisObj.ca_id
          },
          slient: true,
          userinfo: false,
          url: 'User/getHistoryRecommendList',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.historylist = res.result.list
              thisObj.historyyear = res.result.year
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getArticleRecommendList: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            mo_id: thisObj.mo_id,
            cate: '最新政策',
            limit: thisObj.limita,
            ca_id: thisObj.ca_id
          },
          slient: true,
          userinfo: false,
          url: 'User/getArticleRecommendList',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.ArticleRecommendList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getArticle: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            ca_id: this.ca_id,
            mo_id: thisObj.mo_id,
            cate: '最新发布',
            limit: thisObj.limita
          },
          slient: true,
          userinfo: false,
          url: 'User/getArticleRecommendList',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.Article = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getRimCar: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            limit: 3
          },
          slient: true,
          userinfo: false,
          url: 'Car/getRimCar',
          callback: function (type, res) {
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.RimCar = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      }
    },
    created () {
      /* 成交历史 */
      if (this.mo_id !== '') {
        this.historyAjax()
      }
      /* 推荐车型 */
      this.getRecommendCar()
      /* 车评内容 */
      this.getEvaluationList()
      /* 相关政策 */
      this.getArticleRecommendList()
      /* 品牌文章 */
      this.getArticle()
      /* 周边车型 */
      this.getRimCar()
    },
    watch: {
      'ca_id': 'getcaIdlist'
    }
  }
</script>

<style scoped>
  .fs{
    cursor: pointer;
  }
  .blue_r {
    color: #528df5;
  }
</style>
